<template>
  <view @click="getHeadHeight">
    <!-- <view class="topTitle">
    <view class="back" :style="[{paddingTop:titleTop+'rpx'},{height:bgHeight+'rpx'},{lineheight:titleHeight+'rpx'}]" :class="isSearch?'':'center'" @click="backFun">
      <view class="back-img" v-if="isShowLeft">
        <u-icon name="arrow-left" :color="color" size="20" ></u-icon>
      </view>
      
      <text @tap="onClickLeft" class="text" :style="{color:color}">{{leftText}}</text>
    </view>

  </view> -->
  <!-- <view class="status_bar" :style="{'height':statusBarHeight+'px'}"></view> -->
    <u-navbar :title="leftText" :titleStyle="{'color':color}" :fixed="fixed" :bgColor="bgColor" leftIcon=" ">
      <view class="u-nav-slot" slot="left" >
        <u-icon name="arrow-left" :color="color" size="20" v-if="isShowLeft" @click="onClickLeft"></u-icon>
      </view>
    </u-navbar>
  </view>
</template>

<script>
export default {
  name: 'wybar',
  data() {
    return {
      system_top: 44,
      wxWidth: 15,
      //顶部文字
      titleTop: '',
      titleHeight: '',
      bgHeight: '',
    }
  },
  created() {
    const res = uni.getSystemInfoSync()

    if (parseInt(res.safeArea.top) > this.system_top) {
      this.system_top = parseInt(res.safeArea.top)
    }

    // if (parseInt(res.safeArea.top) == 20) {
    // 	this.system_top = 44;
    // }
    console.log(this.system_top)
    this.getWxTitleTop()
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    leftText: {
      type: String,
      default: '',
    },
    rightText: {
      type: String,
      default: '',
    },
    leftIcon: {
      type: String,
      default: '',
    },
    rightIcon: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '#fff',
    },
    bgColor:{
       type: String,
      default: 'transparent',
    },
    isShowLeft:{
      type:Boolean,
      default:false
    },
    fixed:{
       type: Boolean,
      default: true,
    }
  },
 
  methods: {
    onClickLeft() {
      // this.$emit('clickLeft')
      uni.navigateBack()
    },
    onClickRight() {
      this.$emit('clickRight')
    },
    getWxTitleTop() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      this.titleTop = menuButtonInfo.top //标题文字的position:top
      this.titleHeight = menuButtonInfo.height //标题文字的高度
      //背景的高度=top+height+需要的下方高度
      this.bgHeight = menuButtonInfo.top + menuButtonInfo.height + 75
    },
    backFun() {
      uni.navigateBack()
    },
    //计算导航栏总高度
			getHeight() {
				// 判断获取微信小程序胶囊API是否可用
				if (uni.canIUse('getMenuButtonBoundingClientRect')) {
					// 获取状态栏高度(电量时间通知等信息-单位px)
					let sysInfo = uni.getSystemInfoSync();
					this.statusBarHeight = sysInfo.statusBarHeight;
					// 获取微信小程序胶囊布局位置信息
					let rect = uni.getMenuButtonBoundingClientRect();
					this.menuButtonRect = JSON.parse(JSON.stringify(rect));
					// (胶囊上部高度-状态栏高度)*2 + 胶囊高度 = 导航栏高度（不包含状态栏）
					//以此保证胶囊位于中间位置，多机型适配
					let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
					this.navBarHeight = navBarHeight;
					// 状态栏高度 + 导航栏高度 = 自定义导航栏高度总和
					this.height = sysInfo.statusBarHeight + navBarHeight;
				} else {
					uni.showToast({
						title: '您的微信版本过低，界面可能会显示不正常',
						icon: 'none',
						duration: 4000
					});
				}
			}
  },
}
</script>

<style lang="scss">
.topTitle {
  .center {
    justify-content: center;
  }
  .back {
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    //
    z-index: 999;
    width: 100%;
    .back-img {
      position: absolute;
      top: 50%;
      left: 32rpx;
      transform: translate(-50%);
    }
    .text {
      font-size: 32rpx;
      font-weight: 500;
      text-align: center;
    }
  }
}
</style>
